<template>
  <div>
    <h2>CRM订单状态SOP编辑器使用示例</h2>

    <!-- 示例1：基础使用 -->
    <el-button type="success" @click="showExample1">
      打开SOP编辑器 - 基础示例
    </el-button>

    <!-- 示例2：预设状态信息 -->
    <el-button type="primary" @click="showExample2">
      打开SOP编辑器 - 带状态信息
    </el-button>

    <!-- SOP编辑器组件 -->
    <crm-order-state-s-o-p
      :visible.sync="sopVisible"
      :state-id="currentStateId"
      :state-name="currentStateName"
      @saved="handleSaved"
    />
  </div>
</template>

<script>
import CrmOrderStateSOP from './crmorderstatesop'

export default {
  name: 'CrmOrderStateSOPExample',
  components: {
    CrmOrderStateSOP
  },
  data() {
    return {
      sopVisible: false,
      currentStateId: 1,
      currentStateName: ''
    }
  },
  methods: {
    showExample1() {
      // 基础示例：只传递必须的状态ID
      this.currentStateId = 1
      this.currentStateName = ''
      this.sopVisible = true
    },

    showExample2() {
      // 完整示例：传递状态ID和名称
      this.currentStateId = 2
      this.currentStateName = '待处理'
      this.sopVisible = true
    },

    handleSaved() {
      console.log('SOP保存成功！')
      this.$message.success('SOP设置已保存')
      // 这里可以刷新列表或执行其他操作
    }
  }
}
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 20px;
}
</style>

<!--
使用说明：

1. 引入组件：
   import CrmOrderStateSOP from '@/views/crm/elements/crmorderstatesop'

2. 注册组件：
   components: { CrmOrderStateSOP }

3. 使用组件：
   <crm-order-state-s-o-p
     :visible.sync="sopVisible"
     :state-id="stateId"
     :state-name="stateName"
     @saved="handleSaved"
   />

Props说明：
- visible: Boolean, 控制对话框显示，支持.sync修饰符
- stateId: Number/String, 必需，订单状态ID
- stateName: String, 可选，订单状态名称（用于显示）

Events说明：
- saved: 保存成功后触发，可以在此刷新列表等
- update:visible: 自动通过.sync更新visible状态

功能特点：
- 使用Tab切换三个编辑区域（目标、学习资料、关键结果）
- 使用Tiptap富文本编辑器
- 支持设置预计耗时和启用状态
- 自动加载已有的SOP配置
- 智能判断创建或更新操作
-->
